<template>
  <a-layout style="height: 100vh">
    <a-layout-content style="background-color: #FFFAF4">
      <div style="margin-top: 7vh">
        <v-row no-gutters>
          <!--          左侧栏-->
          <v-col cols="12" lg="3">
            <v-card
              style="background-color: rgb(246,241,235)"
              elevation="0"
              max-width="400"
              class="lg-auto"
              height="91vh"
            >
              <v-card-title >
                <span style="font-size: 22px; font-weight: bold;color: #2C2E2D">笔记本</span>
                <v-spacer></v-spacer>
                <v-btn disabled fab x-small>
                        <span style="color: #2C2E2D">
                          {{note_list.length}}
                        </span>
                </v-btn>
              </v-card-title>
              <v-card-subtitle>
                <v-text-field
                  placeholder="搜 索 笔 记"
                  hint="请 输 入 引 导 名"
                  v-model="input"
                  prepend-icon="mdi-magnify"
                  color="#2C2E2D"
                  @keyup.enter.native="get_note_list(input)"
                  @click:prepend="get_note_list(input)"
                >
                </v-text-field>
              </v-card-subtitle>
              <v-divider v-if="note_list.length!==0"></v-divider>
              <div>
                <v-list
                  nav
                  dense
                  class="overflow-y-auto overflow-x-hidden"
                  height="74vh"
                  color="rgb(246,241,235)"
                >
                  <v-list-item-group
                    v-model="selectedItem"
                    mandatory
                    color="primary"
                  >
                    <v-list-item
                      v-for="(item, i) in note_list"
                      :key="i"
                      three-line @click="get_note_detail(item)"
                    >
                      <v-list-item-content>
                        <v-list-item-title>
                          <span>{{item.name}}</span>
                        </v-list-item-title>
                        <v-list-item-subtitle>
                          <span>属于&nbsp;{{ item.guideName }}&nbsp;引导</span>
                        </v-list-item-subtitle>
                        <v-list-item-subtitle>
                          <span>更新于&nbsp;{{ item.updateTime }}</span>
                        </v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list-item-group>
                </v-list>
              </div>
            </v-card>
          </v-col>
          <!--          右侧笔记-->
          <v-col cols="12" lg="9">
            <div v-if="note_list.length!==0">
              <!--            富文本编辑器-->
              <v-row>
                <v-col cols="12" lg="12">
                  <div>
                    <NoteDisplay v-model="note_selected.content"/>
                  </div>
                </v-col>
              </v-row>
              <!--            专利链接-->
              <v-sheet height="15vh" color="#FFFAF4">
                <v-container>
                  <v-row>
                    <v-col cols="12" lg="12">
                      <div>
                        <v-card style="background-color: rgba(114,117,124,0.08)" flat
                                :href=this.note_selected.patentUrl target="_blank" height="6vh">
                          <v-container>
                            <v-row>
                              <v-col cols="12" lg="11">
                                <div>
                                  <v-icon left>
                                    mdi-link-variant
                                  </v-icon>
                                  <span style="color: grey; letter-spacing: 1px">
                                  专利<b>{{this.note_selected.patentName}}</b>的详细信息
                                </span>
                                </div>
                              </v-col>
                              <v-col cols="12" lg="1" style="text-align: center">
                                <v-icon>
                                  mdi-open-in-new
                                </v-icon>
                              </v-col>
                            </v-row>
                          </v-container>
                        </v-card>
                      </div>
                    </v-col>
                  </v-row>
                  <!--                更新时间和删除保存按钮-->
                  <v-row>
                    <v-col cols="12" lg="9">
                      <span style="font-size: 14px;color: grey">更新于&nbsp;{{this.note_selected.updateTime}}</span>
                    </v-col>
                    <v-col cols="12" lg="1" style="text-align: center">
                      <v-dialog v-model="dialog" width="25vw">
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn x-small color="grey"
                                 v-bind="attrs"
                                 v-on="on"
                                 @click="rename_dialog"
                          >
                            <span style="color: #FFFAF4; font-family: 宋体,serif">
                              重命名
                            </span>
                          </v-btn>
                        </template>
                        <v-card>
                          <v-card-title>
                            重命名笔记
                          </v-card-title>
                          <v-card-text>
                            <br>
                            <v-text-field
                              v-model="note_name"
                              :rules="rules"
                              dense
                              prepend-icon="mdi-pencil"
                              style="width: 20vw"
                            ></v-text-field>
                          </v-card-text>
                          <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn text @click="dialog = false" color="grey">
                              取消
                            </v-btn>
                            <v-btn color="primary" text @click="rename">
                              确定
                            </v-btn>
                          </v-card-actions>
                        </v-card>
                      </v-dialog>
                    </v-col>
                    <v-col cols="12" lg="1" style="text-align: center">
                      <v-dialog
                        max-width="370"
                      >
                        <template v-slot:activator="{ on, attrs }">
                          <v-btn x-small color="#A94600"
                                 v-bind="attrs"
                                 v-on="on">
                            <v-icon left color="#FFFAF4">
                              mdi-delete-empty
                            </v-icon>
                            <span style="color: #FFFAF4; font-family: 宋体,serif">
                              删除
                            </span>
                          </v-btn>
                        </template>
                        <template v-slot:default="dialog">
                          <v-card>
                            <v-card-title>
                              删除笔记
                            </v-card-title>
                            <v-card-text>确认删除吗？</v-card-text>
                            <br><br>
                            <v-card-actions>
                              <v-spacer></v-spacer>
                              <v-btn text @click="dialog.value = false">
                                取消
                              </v-btn>
                              <v-btn text @click="delete_note(dialog)" color="#A94600">
                                确认
                              </v-btn>
                            </v-card-actions>
                          </v-card>
                        </template>
                      </v-dialog>
                    </v-col>
                    <v-col cols="12" lg="1" style="text-align: center">
                      <v-btn x-small color="primary" @click="update_note()">
                        <v-icon left color="#FFFAF4">
                          mdi-pencil
                        </v-icon>
                        <span style="color: #FFFAF4; font-family: 宋体,serif">
                        保存
                      </span>
                      </v-btn>
                    </v-col>
                  </v-row>
                </v-container>
              </v-sheet>
            </div>
            <div v-else>
              <v-sheet color="#FFFAF4" height="91vh">
                <v-row justify-lg="center">
                  <v-col cols="12" lg="4">
                    <br><br><br><br><br><br><br>
                    <v-img src="../../public/images/empty_note.png"></v-img>
                  </v-col>
                </v-row>
              </v-sheet>
            </div>
          </v-col>
        </v-row>
        <v-dialog
          v-model="note_change_confirm"
          persistent
          max-width="370"
        >
          <v-card>
            <v-card-title>
              笔记未保存
            </v-card-title>
            <v-card-text>是否保存对笔记的修改？</v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="grey"
                text
                @click="not_save"
              >
                不保存
              </v-btn>
              <v-btn
                color="#89B8CA"
                text
                @click="do_save"
              >
                保存
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import request from "../utils/request"
import NoteDisplay from "@/components/NoteDisplay";

export default {
  name: "note",
  components: {
    NoteDisplay
  },
  watch: {
    input:function (val) {
      if(val==='') {
        this.get_note_list('')
      }
    }
  },

  data: () => ({
    note_list: [], //笔记列表
    note_selected: {}, //当前选中笔记
    tmp_item: {}, //临时item
    check_note_change: {}, //用于检测笔记内容是否改变
    selectedItem: null, //当前选中笔记下标
    input: '', //搜索框输入内容
    note_name: '', //重命名输入框内容
    dialog: false, //重命名对话框显示
    note_change_confirm: false, //是否保存对话框显示
    rules: [ //重命名输入框规则
      value => !!value || '笔记名不能为空',
      value => (value && value.split(" ").join("").length !== 0) || '笔记名不能为空',
      value => (value || '').length <= 10 || '不超过10个字'
    ],
  }),
  methods: {
    get_note_list(input) { //获取笔记列表
      request.get("/note/searchByGuide",{
        params: {
          guideName: input,
        }
      }).then(res => {
        this.note_list = res.data
        if(res.data.length !== 0){ //笔记列表存在笔记时
          if(this.selectedItem === null) { //打开页面时
            this.selectedItem = 0
            this.note_selected = JSON.parse(JSON.stringify(res.data[0]))
            this.check_note_change = JSON.parse(JSON.stringify(res.data[0]))
          }
          if(this.selectedItem === res.data.length) { //删除最后一篇笔记时
            this.note_selected = JSON.parse(JSON.stringify(res.data[this.selectedItem-1]))
            this.check_note_change = JSON.parse(JSON.stringify(res.data[this.selectedItem-1]))
          } else { //保存笔记或删除其他笔记时
            this.note_selected = JSON.parse(JSON.stringify(res.data[this.selectedItem]))
            this.check_note_change = JSON.parse(JSON.stringify(res.data[this.selectedItem]))
          }
        }
      })
    },
    rename_dialog() { //重命名对话框打开
      this.dialog = true
      this.note_name = this.note_selected.name
    },
    rename() { //重命名方法
      if(this.note_name.length>10) {
        this.sendWarnMessage("请注意字数限制")
      } else if(this.note_name.length===0||this.note_name.split(" ").join("").length===0) {
        this.sendWarnMessage("笔记名不能为空")
      } else {
        this.note_selected.name = this.note_name
        request.post("/note/update",this.note_selected).then(res => {
          if (res.code === '200') {
            this.sendSuccessMessage("重命名成功")
          } else {
            this.sendWarnMessage("重命名失败，笔记不存在")
            this.get_note_list(this.input)
          }
        })
        this.dialog = false
      }
    },
    delete_note(dialog) { //删除笔记
      request.delete("/note/"+this.note_selected.id).then(res => {
        if (res.code === '200') {
          this.sendSuccessMessage('删除成功')
          this.get_note_list(this.input)
        } else {
          this.sendWarnMessage('删除失败，笔记不存在')
          this.get_note_list(this.input)
        }
      })
      dialog.value = false
    },
    update_note() { //保存按钮
      request.post("/note/update", this.note_selected).then(res => {
        if (res.code === '200') {
          this.sendSuccessMessage('已保存')
          this.get_note_list(this.input)
        } else {
          this.sendWarnMessage('保存失败，笔记不存在')
          this.get_note_list(this.input)
        }
        this.check_note_change.content = JSON.parse(JSON.stringify(this.note_selected.content))
      })
    },
    get_note_detail(item) { //查看笔记
      if(JSON.parse(JSON.stringify(this.note_selected.content))===JSON.parse(JSON.stringify(this.check_note_change.content))) {
        this.note_selected = JSON.parse(JSON.stringify(item))
        this.check_note_change = JSON.parse(JSON.stringify(item))
      } else {
        this.note_change_confirm = true
        this.tmp_item = JSON.parse(JSON.stringify(item))
      }
    },
    not_save() { //不保存笔记
      this.note_selected = JSON.parse(JSON.stringify(this.tmp_item))
      this.check_note_change = JSON.parse(JSON.stringify(this.tmp_item))
      this.note_change_confirm = false
    },
    do_save() { //保存笔记
      this.update_note()
      this.note_selected = JSON.parse(JSON.stringify(this.tmp_item))
      this.check_note_change = JSON.parse(JSON.stringify(this.tmp_item))
      this.note_change_confirm = false
    }
  },
  created() {
    this.get_note_list('')
  },

}
</script>

<style scoped>
</style>
